Hacks动画篇-Hack3 为ViewGroup的子视图添加悦目的动画效果

为ViewGroup的子视图添加悦目的动画效果

作者:李旺成
时间:2016年5月11日


这个 Hack 将介绍如何为 ViewGroup 的子视图添加动画效果。

默认情况下,添加到 ViewGroup 中的子视图是直接显示出来的。有一个简单的方法可以为这个过程增加动画效果。

LayoutAnimationController 类简介

LayoutAnimationController 可以为 ViewGroup 的子视图添加动画效果。需要注意的是,并不能为每个子视图分别指定不同的动画效果(也就是说每个子视图都会有相同的动画效果),但是 LayoutAnimationController 可以决定各个子视图显示动画效果的时间。

先看下官方的介绍:

LayoutAnimationController类

文档上介绍了 ”XML Attributes“,那说明可以在 xml 中使用,也就是说有两种使用方式:直接在 Java 代码中用和在 xml 中定义。在稍微看一下提供了哪些方法:

LayoutAnimationController方法

有几个方法简单解释下:

  • setInterpolator)(Interpolator interpolator):设置两个子视图之间延迟时间的插值器,注意添加的动画也是可以设置单独设置插值器的
  • setOrder)(int order):设置控件显示的顺序
  • willOverlap)():返回两个子视图的动画是否会出现重叠

LayoutAnimationController 简单使用

上面介绍 LayoutAnimationController 的时候提过,该类应该有两种使用方式,下面将分别介绍这两种方式。

先看下效果:
LayoutAnimationController使用演示

直接在 Java 代码中使用

1、创建动画

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
AnimationSet set = new AnimationSet(false); // 传入 false 表示组成动画集中的动画使用不同的 Interpolator
Animation alphaAnimation = new AlphaAnimation(0.0f, 1.0f);
alphaAnimation.setDuration(700);
alphaAnimation.setInterpolator(new FastOutSlowInInterpolator());
set.addAnimation(alphaAnimation);

Animation translateAnimation = new TranslateAnimation(
Animation.RELATIVE_TO_SELF,
0.0f,
Animation.RELATIVE_TO_SELF,
0.0f,
Animation.RELATIVE_TO_SELF,
-1.0f,
Animation.RELATIVE_TO_SELF,
0.0f);
translateAnimation.setDuration(1000);
translateAnimation.setInterpolator(new LinearOutSlowInInterpolator());
set.addAnimation(translateAnimation);

这里使用透明度动画和位移动画组合创建一个动画集,并且分别为这两个动画设置了不同的 Interpolator 以及 持续时间。

注意:直接使用某一种动画是完全一样的,这里使用动画集仅仅是为了演示。

2、代码创建 LayoutAnimationController

1
2
3
LayoutAnimationController lac = new LayoutAnimationController(
set,
1f);

3、设置子视图显示的顺序

1
lac.setOrder(LayoutAnimationController.ORDER_NORMAL);

order 可有如下取值:

  • ORDER_NORMAL:顺序
  • ORDER_REVERSE:相反
  • ORDER_RANDOM:随机

4、为 ViewGroup 设置 LayoutAnimationController

1
mContentLV.setLayoutAnimation(lac);

5、为 ViewGroup 添加子视图
这里的 ViewGroup 是 ListView,所以要为其设置 Adapter:

1
2
3
4
mContentLV.setAdapter(new ArrayAdapter<String>(
this,
android.R.layout.simple_list_item_1,
Countries.COUNTRIES));

使用很简单,就这么几步即可。

在 xml 中定义 LayoutAnimationController

其实与在 Java 代码中使用是一样的,只是定义方式的区别。

1、创建 layoutAnimation 的 xml 文件
在 res/anim 文件夹下面创建名为 list_item_anim_layout.xml 的文件,内容如下:

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<layoutAnimation xmlns:android="http://schemas.android.com/apk/res/android"
android:delay="1"
android:animationOrder="reverse"
android:animation="@anim/list_animation"/>

在这里可以直接设置子视图的顺序,延迟时间(注意:单位是”秒“),以及要显示的动画。

2、在布局中为 ViewGroup 设置 layoutAnimation 属性

1
2
3
4
5
<ListView
android:id="@+id/lv_content"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layoutAnimation="@anim/list_item_anim_layout"/>

3、为 ListView 设置 Adapter
为 ListView 设置好 Adapter 应该就可以看到效果了。这里就不演示了,代码在演示项目中都有,感兴趣的可以自己下去尝试。

注意事项

只在第一次设置时有效?
示例中使用了 LinearLayout,通过点击按钮往 LinearLayout 中添加和删除子视图。你会发现在给 LinearLayout 设置好 LayoutAnimationController 后调用添加方法(也就是在 oncreate() 方法中执行的那段代码),会有动画效果。但是,当你再次点击”添加“或”删除“按钮,并没有出现动画效果。

这里没有深入研究了,只是在添加和删除子视图之前又调用了一下 ViewGroup 的 setLayoutAnimation() 方法,但是效果很诡异,所有的子视图都会执行动画。

项目地址

AndroidHacks合集
动画篇

项目示例代码:
VGChildrenAnimActivity.java
Countries.java
activity_vgchildrenanim.xml
list_item_anim_layout.xml

参考

LayoutAnimationController

坚持原创技术分享,您的支持将鼓励我继续创作!